<template>
  <el-row class="taskMaintain">
    <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom:10px;">
      <el-breadcrumb-item><img style="width: 16px;vertical-align: middle;margin-right: 5px" src="@/assets/indexPage/location.png"/> 场站信息配置</el-breadcrumb-item>
      <el-breadcrumb-item>
        <span style="font-weight:600;">
           任务管理
        </span>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="itemWrap">
      <el-form ref="formData" :inline="true" :model="formData" label-width="100" size="small">
        <el-form-item property="companyCode" label="单位名称">
          <el-select v-model="formData.companyCode" placeholder="请选择单位" @change="companyChange" clearable>
            <el-option v-for="item in tree" :label="item.companyName" :value="item.companyCode"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item property="name" label="场站名称">
          <el-select v-model="formData.stationCode" placeholder="请选择场站" @change="stationChange" clearable>
            <el-option v-for="item in stationList" :label="item.stationName" :value="item.stationCode" :key="item.stationCode"></el-option>
          </el-select>
        </el-form-item>
<!--        <el-form-item property="name" label="排序方式">-->
<!--          <el-select v-model="formData.order" placeholder="请选择排序方式" >-->
<!--            <el-option label="倒序" value="desc"></el-option>-->
<!--            <el-option label="顺序" value="asc"></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
        <el-row>
          <el-button @click="reset" size="small" class="fr" style="margin-left:10px;margin-right:10px;">重置</el-button>
          <el-button type="primary" @click="search" size="small" icon="el-icon-search" class="fr">查询</el-button>
          <el-button type="primary" icon="el-icon-plus" size="small" @click="addNewTaskClick">新增任务</el-button>
          <el-button type="primary" @click="importTaskClick" size="small">导入任务</el-button>
          <el-button type="primary" @click="downloadTemplate" size="small">下载导入模板</el-button>
          <el-button type="danger" @click="delClick" size="small" >删除</el-button>
        </el-row>
      </el-form>
    </el-card>

    <el-table ref="tableData" :data="tableData" key="saleOrder" class="marginTop10" border stripe size="small" @sort-change="sortChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        type="index"
        width="50" label="序号">
      </el-table-column>
        <el-table-column property="companyName" label="单位名称" show-overflow-tooltip></el-table-column>
        <el-table-column property="stationName" label="场站名称" show-overflow-tooltip></el-table-column>
        <el-table-column property="inspectTaskCode" label="任务编号" show-overflow-tooltip></el-table-column>
        <el-table-column property="inspectDay" label="任务时间" show-overflow-tooltip sortable="custom"></el-table-column>
        <el-table-column property="taskDescription" label="任务描述" show-overflow-tooltip width="320"></el-table-column>
        <!-- <el-table-column property="inspectRouteCode" label="任务航线" show-overflow-tooltip></el-table-column> -->
        <el-table-column property="other" label="操作" show-overflow-tooltip>
          <template slot-scope="scope">
            <span class="btn" @click="editTaskClick(scope.row)">修改</span>
          </template>
        </el-table-column>
    </el-table>
    <el-pagination class="text-center marginTop10" @size-change="sizeChange" @current-change="currentChange" :page-size="pageSize" :current-page.sync="page" :page-sizes="[10, 20, 30, 40]" background layout="total, prev, pager, next, sizes, jumper" :total="totalElements">
    </el-pagination>

    <com-dialog-import-task ref="dialogImportTask" @sendTaskMaintain="sendTaskMaintain"></com-dialog-import-task>

    <com-dialog-edit-task ref="dialogEditTask" :title="editTitle" :taskInfo="taskInfo" @sendDialogEditTask="sendDialogEditTask"></com-dialog-edit-task>
  </el-row>
</template>

<script>
  import stations from "../../api/stations"
  import manual from "../../api/manual";
  import comDialogImportTask from "./components/dialogImportTask"
  import comDialogEditTask from "./components/dialogEditTask"
  import dataSourceApi from "../../api/dataSourceApi";
  import moment from 'moment'
  export default {
    name: "taskMaintain",
    components: {
      comDialogImportTask,
      comDialogEditTask
    },
    data() {
      return {
        formData: {
          stationCode: "",
          order: 'desc'
        },
        tableData: [],
        pageSize: 10,
        page: 1,
        tree: [],
        stationList: [],
        editTitle: "",
        taskInfo: {},
        totalElements: 20
      }
    },
    mounted() {
      this.getCompanyList()
      this.search()
    },
    methods: {
      reset() {
        this.formData = {}
        this.tableData = []
      },
      delClick() {
        this.$confirm('是否确定删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          const ids = []
          this.$refs.tableData.selection.map(item => {
            ids.push(item.id)
          })
          dataSourceApi.deleteInspectTaskInfo(ids).then(res => {
            if (res && res.data.code === 200) {
              this.search()
            }
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }).catch(e => {
              this.$message.error({message: e.message ? e.message : e, center: true})
          })
        })
      },
      sortChange(column, prop, order) {
        column.order === "ascending" ? this.formData.order = "asc" : this.formData.order = "desc"
        this.search()
      },
      sendDialogEditTask() {
        this.search()
      },
      currentChange(val) {
        this.page = val
        this.search()
      },
      sizeChange(val) {
        this.pageSize = val
        this.search()
      },
      importTaskClick() {
        this.$refs.dialogImportTask.show()
      },
      addNewTaskClick() {
        this.editTitle = "新增任务"
        this.taskInfo = {}
        this.$refs.dialogEditTask.show()
      },
      editTaskClick(taskInfo) {
        this.taskInfo = taskInfo
        this.editTitle = "修改任务"
        this.$refs.dialogEditTask.show()
      },
      companyChange() {
        this.formData.stationCode = ""
        this.getStationByCompany()
      },
      stationChange() {},
      getCompanyList() {
        stations.getCompanyList().then(res => {
          if (res && res.data.code === 200) {
            this.tree = res.data.data
          }
        }).catch(e => {
            this.$message.error({message: e.message ? e.message : e, center: true})
        })
      },
      getStationByCompany() {
        manual.getStationByCompany({
          companyCode: this.formData.companyCode
        }).then(res => {
          if (res && res.status === 200 && res.data.code === 200) {
            this.stationList = res.data.data
          }
        }).catch(e => {
            this.$message.error({message: e.message ? e.message : e, center: true})
        })
      },
      downloadTemplate() {
        window.open("bigdata-pv-backend/inspecttaskinfo/downloadTemplate")
      },
      search() {
        dataSourceApi.pageInspectTaskInfoList({page: this.page, limit: this.pageSize, sidx: 'create_at', order: this.formData.order, companyCode: this.formData.companyCode, stationCode: this.formData.stationCode}).then(res => {
          if (res && res.status === 200 && res.data.code === 200) {
            this.tableData = res.data.data.list.map(item => ({
              ...item,
              inspectDay: item.inspectDay ? moment(item.inspectDay).format('YYYY-MM-DD HH:mm:ss') : ''
            }))
            this.totalElements = res.data.data.totalCount
          }
        }).catch(e => {
            this.$message.error({message: e.message ? e.message : e, center: true})
        })
        // manual.getTaskNumberByCompany({
        //   companyCode: this.formData.companyCode,
        //   stationCode: this.formData.stationCode
        // }).then(res => {
        //   if (res && res.status === 200 && res.data.code === 200) {
        //     this.tableData = res.data.data
        //   }
        // }).catch(e => {
        //     this.$message.error({message: e.message ? e.message : e, center: true})
        // })
      },
      sendTaskMaintain() {
        this.search()
      }
    }
  }
</script>

<style lang="scss">
  .taskMaintain{
    padding: 10px 20px;
    .itemWrap{
      .el-form-item{
        margin-bottom: 3px !important;
      }
    }
    .btn{
      color:#409EFF;
      cursor: pointer;
    }
  }
</style>
